<template>
  <div>
    <hm-header>注册</hm-header>
    <hm-logo></hm-logo>
    <!-- 输入框 -->
    <van-cell-group>
      <!-- 用户名 -->
      <van-field
        v-model="username"
        required
        label="用户名"
        placeholder="请输入用户名"
        :error-message="usernameErrMsg"
        clearable
        @input="checkUsername"
        @clear="clear1"
      />
      <!-- 昵称 -->
      <van-field
        v-model="nickname"
        required
        label="昵称"
        placeholder="请输入昵称"
        :error-message="nicknameErrMsg"
        clearable
        @input="checkNickname"
        @clear="clear2"
      />
      <!-- 密码 -->
      <van-field
        v-model="password"
        required
        label="密码"
        placeholder="请输入密码"
        :error-message="passwordErrMsg"
        clearable
        @input="checkPassword"
        @clear="clear3"
      />
    </van-cell-group>
    <!-- 按钮 -->
    <hm-button @click.native="startRegister">注册</hm-button>
  </div>
</template>

<script>
// 正则
const REG_USERNAME = /^1\d{3,5}$/
const REG_NICKNAME = /^[\u4e00-\u9fa5]{3,7}$/
const REG_PASSWORD = /^\d{3,12}$/

export default {
  data() {
    return {
      username: '111103',
      usernameErrMsg: '',
      nickname: '马哥哥',
      nicknameErrMsg: '',
      password: '123',
      passwordErrMsg: ''
    }
  },
  methods: {
    // 校验用户名
    checkUsername() {
      if (REG_USERNAME.test(this.username)) {
        this.usernameErrMsg = ''
      } else {
        this.usernameErrMsg = '用户名校验失败'
      }
    },
    // 校验用户名
    checkNickname() {
      if (REG_NICKNAME.test(this.nickname)) {
        this.nicknameErrMsg = ''
      } else {
        this.nicknameErrMsg = '昵称校验失败'
      }
    },
    // 校验用户名
    checkPassword() {
      if (REG_PASSWORD.test(this.password)) {
        this.passwordErrMsg = ''
      } else {
        this.passwordErrMsg = '密码校验失败'
      }
    },
    clear1() {
      this.username = ''
      this.usernameErrMsg = ''
    },
    clear2() {
      this.nickname = ''
      this.nicknameErrMsg = ''
    },
    clear3() {
      this.password = ''
      this.passwordErrMsg = ''
    },
    startRegister() {
      if (
        this.username !== '' &&
        this.nickname !== '' &&
        this.password !== '' &&
        this.usernameErrMsg === '' &&
        this.nicknameErrMsg === '' &&
        this.passwordErrMsg === ''
      ) {
        this.$axios
          .post('/register', {
            username: this.username,
            password: this.password,
            nickname: this.nickname
          })
          .then(res => {
            if (res.data.statusCode == 200) {
              this.$toast.success('注册成功')
              console.log(res)
              // this.$router.push({
              //   path: 'login',
              //   query: {
              //     username: this.username,
              //     password: this.password
              //   }
              // })
              this.$router.push({
                name: 'login',
                params: {
                  username: this.username,
                  password: this.password
                }
              })
            } else {
              this.$toast.fail('登录失败')
            }
          })
      } else {
        this.$toast.fail('校验失败')
      }
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>
